<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="c"></div>

  <script src="companies.js"></script>
  <script>

    /*
      练习目的：数量使用数组的map方法和字符串模版
      将companies数据转换为指定的html然后显示
      数据和模版见下面的代码
    */
    /*
    转换完的html如下
    <ul>
      <!-- 一个公司的模版 -->
      <li class='company'><a href="company?id=4">公司名</a></li>
      <ul class='workspaces'>
        <!-- 一个工作区的模版 -->
        <li>
          <img
            src="https://hb-v4-public-img.huoban.com/space_cover/48279911/0"
            width='80'
          />
          <a href="space?id=1539064">工作区（workspace)名</a>
        </li>
        <!-- 一个工作区模版 结束 -->
      </ul>
      <!-- 一个公司模版 结束 -->
      <!-- 下面以此类推列出所有的数据 -->
    </ul>
    */

    function companyList(companies) {
      /*你的代码*/
      companies.map(function (arr1) {
        return `<ul>
      
      <li class='company'><a href="company?id=${arr1.id}">${arr1.name}</a></li>
      <ul class='workspaces'>
        ${arr1.spaces.map(function (arr) {
          return `<li>
          <img
            src="${arr.image}"
            width='80'
          />
          <a href="space?id=1539064">工作区（workspace）名</a>
        </li>`
        })}
        
       
      </ul>
    </ul>`
      })

    }
    // 注意：companies数据见同目录下的companies.js
    document.getElementById('c').innerHTML = companyList(companies)
  </script>
</body>

</html>